<template>
    <div id="setting">
        <el-tabs tab-position="left" style="height: 100%;">
            <el-tab-pane label="我的" lazy>
                <el-scrollbar class="tab-view">
                    <div class="row">
                        <div class="column">
                            <span>您的IP</span>
                            <el-tag>{{ me.ip }}</el-tag>
                        </div>
                        <div class="column">
                            <span>浏览器</span>
                            <el-tag>{{ me.browser }}</el-tag>
                        </div>
                        <div class="column">
                            <span>OS</span>
                            <el-tag>{{ me.os }}</el-tag>
                        </div>
                        <div class="column">
                            <span>网络延时</span>
                            <el-tag>{{ netWorkDelay }}ms</el-tag>
                        </div>

                        <div class="column">
                            <svg @click="getMe" style="width:20px;height:20px;" viewBox="0 0 1024 1024"
                                xmlns="http://www.w3.org/2000/svg" data-v-029747aa="">
                                <path fill="currentColor"
                                    d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <template v-if="user">
                        <div class="row">
                            <div class="column">
                                <span>头像</span>
                                <el-image :src="user.head">
                                    <template #error>
                                        <svg style="width: 25px;" viewBox="0 0 1024 1024"
                                            xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8="">
                                            <path fill="currentColor"
                                                d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z">
                                            </path>
                                        </svg>
                                    </template>
                                </el-image>
                            </div>
                            <div class="column">
                                <span>用户名</span>
                                <el-tag>{{ user.nickName }}</el-tag>
                            </div>
                            <div class="column">
                                <span>性别</span>
                                <el-tag>{{ user.gender }}</el-tag>
                            </div>
                        </div>
                        <div class="row">
                            <el-radio-group v-model="uvType" @change="getUvData">
                                <el-radio-button label="1">最近24时</el-radio-button>
                                <el-radio-button label="2">最近7天</el-radio-button>
                                <el-radio-button label="3">最近30天</el-radio-button>
                                <el-radio-button label="4">最近12月</el-radio-button>
                                <!-- <el-radio-button label="5">所有</el-radio-button> -->
                            </el-radio-group>
                        </div>
                        <div class="row" v-if="uv">
                            <uvChart :x="uv.x" :data="uv.data"></uvChart>
                        </div>
                    </template>
                    <div class="row" v-else>
                        <span>未登录</span>
                        <el-button @click="showLoginPage">点击登录</el-button>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="首页" v-if="user && setting" lazy>
                <el-scrollbar class="tab-view">
                    <div class="row">
                        <div class="column">
                            <span>显示天气</span>
                            <el-switch v-model="setting.showWeather" @change="saveSetting"></el-switch>
                        </div>
                        <div class="column">
                            <span>显示时间</span>
                            <el-switch v-model="setting.showTime" @change="saveSetting"></el-switch>
                        </div>
                        <div class="column">
                            <span>显示日期</span>
                            <el-switch v-model="setting.showDate" @change="saveSetting"></el-switch>
                        </div>
                        <div class="column">
                            <span>显示热搜</span>
                            <el-switch v-model="setting.showHotSearch" @change="saveSetting"></el-switch>
                        </div>
                        <div class="column">
                            <span>自动聚焦搜索框</span>
                            <el-switch v-model="setting.autoFocus" @change="saveSetting"></el-switch>
                        </div>
                    </div>
                    <div class="row">
                        <div class="column">
                            <span>背景图片来源</span>
                            <el-checkbox-group v-model="setting.bgSource" @change="saveSetting">
                                <el-checkbox label="system">系统推荐</el-checkbox>
                                <el-checkbox label="weather">天气</el-checkbox>
                                <el-checkbox label="festival">节日</el-checkbox>
                                <el-checkbox label="season">季节</el-checkbox>
                                <el-checkbox label="self">自定义</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                            <span>切换背景时机</span>
                            <el-radio-group v-model="setting.changeBgMode" @change="saveSetting">
                                <el-radio :label="1">不切换</el-radio>
                                <el-radio :label="2">每次进入</el-radio>
                                <el-radio :label="4">每天首次</el-radio>
                            </el-radio-group>
                        </div>
                    </div>

                    <div class="row">
                        <div class="column">
                            <uploadImage text="上传图片" size="small" action="/setting/uploadBg"
                                @success="uploadImageSuccess"></uploadImage>
                            <el-button type="primary" size="small">上传链接</el-button>
                            <!-- <el-button type="primary" size="small" @click="getSetting">刷新设置</el-button> -->
                            <el-tag type="success" v-if="setting.bgSource && setting.bgSource.includes('self')">已启用
                            </el-tag>
                            <el-tag v-else>未启用</el-tag>
                        </div>
                    </div>
                    <div class="row imgs">
                        <el-image class="img" @contextmenu.prevent="delSelfBg(index)"
                            v-for="(item, index) in setting.selfBg" :src="getSrc(item)"
                            :preview-src-list="setting.selfBg.map(getSrc)" :initial-index="index">
                            <template #error>
                                <div class="el-image__error" :src="getSrc(item)">FAILED</div>
                            </template>
                        </el-image>
                    </div>
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>

        <div class="fiexd-btn fiexd-btn-home" @click="goHome">
            <svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8="">
                <path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z"></path>
            </svg>
        </div>
    </div>
</template>
<script>
import uploadImage from '../components/uploadImage.vue';
import uvChart from '../components/setting/uvChart.vue';
import { getMe, getSetting, saveSetting, getMyUv } from '@/api/setting.js'
import config from '@/config/index.js'
export default {
    name: 'Setting',
    data() {
        return {
            uvType: "1",
            setting: null,
            netWorkDelay: -1,
            me: {
                ip: "获取中",
                os: "获取中",
                browser: "获取中"
            },
            uv: {}
        }
    },
    created() {
        this.initSettingPage()
    },
    computed: {
        user() {
            return this.$store.state.user.user
        }
    },
    methods: {
        delSelfBg(index) {
            this.$confirm(
                '确定删除该图片吗？操作不可逆',
                '警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.setting.selfBg.splice(index, 1)
                    this.saveSetting()
                })
                .catch(() => { })
        },
        initSettingPage() {
            this.getUvData(this.uvType)
            this.getSetting()
            //延时可以解决显示的延迟高的问题
            setTimeout(() => {
                this.getMe()
            }, 100);
        },
        getSrc(url) {
            if (url.startsWith('http://') || url.startsWith("https://")) {
                return url
            }
            return config.STATIC_URL + url
        },
        uploadImageSuccess(res) {
            if (!this.setting.selfBg) {
                this.setting.selfBg = []
            }
            this.setting.selfBg.push(res.data)
            this.saveSetting()
        },
        getMe() {
            let startTime = new Date().getTime()
            getMe().then(res => {
                let endTime = new Date().getTime()
                this.netWorkDelay = endTime - startTime
                if (res.code == 200) {
                    this.me = res.data
                } else {
                    this.$msgError(res)
                }
            })
        },
        saveSetting() {
            saveSetting(this.setting).then(res => {
                console.log(res)
            })
        },
        getUvData(v) {
            if (this.user) {
                getMyUv(v).then(res => {
                    if (res.code == 200) {
                        this.uv = res.data
                    } else {
                        this.$msgError(res)
                    }
                })
            }
        },
        getSetting() {
            if (this.user) {
                getSetting().then(res => {
                    if (res.code == 200) {
                        this.setting = res.data
                    } else {
                        this.$msgError(res)
                    }
                })
            }
        },
        goHome() {
            this.$router.push('/');
        },
        showLoginPage() {
            this.$store.dispatch("user/openLoginPage", this.$route.fullPath)
        },
    },
    components: {
        uploadImage,
        uvChart
    },
    watch: {
        user() {
            this.initSettingPage()
        }
    }
}
</script>
<style lang="scss">
#setting {
    height: 100%;

    .el-tabs__content {
        height: 100%;
    }

    .el-tab-pane {
        height: 100%;
    }

    .tab-view {
        height: 100%;
        padding: 20px;
    }

    .row {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px 0;

        .column {
            display: flex;
            gap: 10px;
            align-items: center;
        }
    }

    .imgs {
        flex-wrap: wrap;

        .img {
            width: 192px;
            height: 108px;
        }
    }

    .fiexd-btn-home {
        right: 30px !important;
        bottom: 30px !important;
    }
}
</style>